<template>
  <div class="fillcontain">
    <!-- <div>
      <el-collapse v-model="activeNames" @change="handleChange">
        <el-collapse-item title="高级筛选" name="1">
          <search></search>
          <div style="display: flex; justify-content: flex-end">
            <el-button size="small" type="primary">新增车辆</el-button>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div> -->

    <div class="contain">
      <search-item
        @showDialog="showAddFundDialog"
        @showDialog2="showAddMarketDialog"
        @searchList="getMarketList"
      ></search-item>
      <el-container>
        <el-aside style="width: 100px">
          <el-tabs
            :tab-position="tabPosition"
            @tab-click="changeTable"
            style="height: 100%"
            v-model="activeName"
          >
            <el-tab-pane
              :label="item.name"
              v-for="item of tabList"
              :key="item.id"
              :name="item.name"
            ></el-tab-pane>
          </el-tabs>
        </el-aside>
        <el-container style="width: 800px">
          <div class="table_container">
            <el-table
              v-loading="loading"
              :data="tableData"
              border
              stripe
              highlight-current-row
              header-cell-class-name="table-header-class"
              style="width: 100%"
            >
              <el-table-column label="序号" width="60" align="center">
                <template slot-scope="scope">
                  <span
                    >{{
                      scope.$index +
                      (paginations.pageIndex - 1) * paginations.pageSize +
                      1
                    }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                property="name"
                label="用户名称"
                width="180"
                align="center"
              >
              </el-table-column>
              <el-table-column label="操作" align="center" width="200px">
                <template slot-scope="scope">
                  <el-button type="primary" @click="handleEdit(scope.row)"
                    >修改</el-button
                  >
                  <!-- <el-button type="primary" @click="handleDel(scope.row)"
                    >删除</el-button
                  > -->
                </template>
              </el-table-column>
            </el-table>
            <el-row>
              <el-col :span="24">
                <div class="pagination">
                  <el-pagination
                    v-if="paginations.total > 0"
                    :page-sizes="paginations.pageSizes"
                    :page-size="paginations.pageSize"
                    :layout="paginations.layout"
                    :total="paginations.total"
                    :current-page="paginations.pageIndex"
                    @current-change="handleCurrentChange"
                    @size-change="handleSizeChange"
                  >
                  </el-pagination>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-container>
      </el-container>
    </div>
    <addFundDialog
      v-if="addFundDialog.show"
      :isShow="addFundDialog.show"
      :dialogRow="addFundDialog.dialogRow"
      @getFundList="getMarketList"
      @closeDialog="hideAddFundDialog"
    ></addFundDialog>
    <add-market-dialog
      v-if="addMarketDialog.show"
      :isShow="addMarketDialog.show"
      :dialogRow="addMarketDialog.dialogRow"
      @getFundList="getMarketList"
      @closeDialog="hideAddMarketDialog"
    >
    </add-market-dialog>
  </div>
</template>

<script>
import SearchItem from "./components/searchItem";
import { marketlist, marketuserlist, marketuserdel } from "@/api/market";
import Search from "./components/Search.vue";
import AddFundDialog from "./components/addFundDialog";
import AddMarketDialog from "./components/addMarketDialog.vue";
export default {
  components: {
    Search,
    SearchItem,
    AddFundDialog,
    AddMarketDialog,
  },
  data() {
    return {
      tabPosition: "left",
      activeName: "",
      addFundDialog: {
        show: false,
        dialogRow: {},
      },
      addMarketDialog: {
        show: false,
        dialogRow: {},
      },
      tableData: [],
      index: 0,
      tabList: [],
      loading: true,
      //需要给分页组件传的信息
      paginations: {
        total: 0, // 总数
        pageIndex: 1, // 当前位于哪页
        pageSize: 20, // 1页显示多少条
        pageSizes: [5, 10, 15, 20], //每页显示多少条
        layout: "total, sizes, prev, pager, next, jumper", // 翻页属性
      },
    };
  },
  created() {},
  mounted() {
    // this.getMarketList();
    this.getMarketList();
  },
  methods: {
    handleEdit(row) {
      this.$store.commit("SET_DIALOG_TITLE", "edit");
      this.addFundDialog.show = true;
      this.addFundDialog.dialogRow = row;
    },
    getMarketList() {
      let obj = {
        opcode: "Int16Array",
        // name: "销售小组1",
        page: 1,
        pagesize: 4,
      };
      marketlist(obj).then((res) => {
        console.log(res);
        this.tabList = res.data.data || [];
        this.activeName = this.tabList[0].name;
        this.getMarketUserList(this.tabList[0].id);
      });
    },
    getMarketUserList(id) {
      let obj = {
        opcode: "Int16Array",
        // name: "销售小组1",
        marketid: id,
        page: 1,
        pagesize: 10,
      };
      marketuserlist(obj).then((res) => {
        this.loading = false;
        console.log(res);
        this.tableData = res.data.data || [];
      });
    },
    handleDel(row) {
      this.$confirm("此操作将删除该组员, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let obj = {
            id: row.id,
            opcode: "Int16Array",
          };
          marketuserdel(obj).then((res) => {
            if (res.success) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.getMarketList();
            } else {
              this.$message({
                type: "error",
                message: "删除失败!联系管理员",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    showAddFundDialog(val) {
      // this.$store.commit("SET_DIALOG_TITLE", val);
      this.addFundDialog.show = true;
    },
    showAddMarketDialog(val) {
      // this.$store.commit("SET_DIALOG_TITLE", val);
      this.addMarketDialog.show = true;
    },
    hideAddFundDialog() {
      this.addFundDialog.show = false;
    },
    hideAddMarketDialog() {
      this.addMarketDialog.show = false;
    },
    // 每页多少条切换
    handleSizeChange(pageSize) {
      this.paginations.pageSize = pageSize;
      this.getMarketList();
    },
    // 上下分页
    handleCurrentChange(page) {
      this.paginations.pageIndex = page;
      this.getMarketList();
    },
    changeTable(value) {
      let index = Number(value.index);
      let id = this.tabList[index].id;
      this.getMarketUserList(id);
      // this.tableData = this.tabList[index].child;
      // console.log(this.tableData, "AAAAAA");
    },
  },
};
</script>

<style lang="less" scoped>
.fillcontain {
  padding-bottom: 0;
}
.contain {
  background: #fff;
  padding: 10px;
  margin-bottom: 20px;
}
.pagination {
  padding: 10px 20px;
  text-align: right;
}
/deep/ .el-collapse-item__header {
  font-size: 20px;
  color: #000;
}
/deep/ .el-collapse-item > div {
  padding: 10px;
  padding-bottom: 0;
  background: #fff;
}
</style>
